import * as React from 'react'
import { omit } from 'muka'
import { getClassName } from '../utils'

interface IProps extends React.HtmlHTMLAttributes<any> {
    className?: string
    type?: 'arrow_left' | 'arrow_right' | 'delete' | 'close' | 'share' | 'more' | 'customer' | 'shop' | 'follow' | 'search' | 'aliPay' | 'weChat' | 'plus' | 'reduce' | 'msg' | 'tick' | 'show_eye' | 'hide_eye' | 'arrow_long_right' | 'phone' | 'lock' | 'phone_bold' | 'tips' | 'wxPay' | 'purse' |
    'arrow_down' | 'classify' | 'error' | 'address' | 'message' | 'homepage' | 'foot' | 'system' | 'protect' | 'time' | 'truck' | 'delivergoods' | 'delete' | 'complete' | 'error_circle' | 'order' | 'returnPolicy' | 'changeGoods' | 'camera' | 'scan' | 'orderApprove' | 'tick_circle' | 'recharge' |
    'wallet' | 'order' | 'weChat' | 'aliPay_circle' | 'blankcard' | 'triangle_bottom' | 'calendar' | 'money' | 'order_hd' | 'order_list' | 'time_circle' | 'edit_pan' | 'protect_tick' | 'exchange' | 'user' | 'IdCard' | 'sigh_circle' | 'statistics_circle' | 'statistics_line' | 'statistics' | 'seal' | 'creditor' 
    | 'success_circle_noBg' | 'fail_circle_noBg' | 'keyboard_delete' | 'live'
    color?: string
}

export default class Icon extends React.Component<IProps, any> {
    public render() {
        const { className, color, type } = this.props
        const otherProps = omit(this.props, ['color', 'type', 'className'])
        return (
            <i
                className={`${getClassName('icon', className)} ${getClassName(`icon_${type}`)}`}
                style={{ color }}
                {...otherProps}
            />
        )
    }
}